<template>
	<view class="content">
		<listHead :only="only" :title='written'></listHead>
		<view class="top-input">
			<u-input placeholder="请输入床号，如 01" type="tel" pattern="[0-9]*" :focus="isInputFocus" @blur="onblur"
				v-model="value" @confirm="doSearch"
				:customStyle="{width:'80%',border: '1px solid rgb(179, 231, 234) !important',borderRadius: '4px 0px 0px 4px'}">
			</u-input>
			<view class="top-bottom" @tap="btnChang">
				<text class="icon iconfont icon-icon-chaxun icon1"></text>
			</view>
		</view>
		<view v-for="(item,index) in hospitalpersonlist" :key="index" class="personlist">
			<text
				:class="['heardercolor',item.CARETYPE == '特' ? 'tecolor': item.CARETYPE == 'Ⅰ' ? 'onecolor': item.CARETYPE == 'Ⅱ' ? 'twocolor' : item.CARETYPE == 'Ⅲ' ? 'threecolor' : 'threecolor']"></text>
			<view class="personinformation" @tap="Jump(item,index)">
				<view
					:class="['hearder-view',item.CARETYPE == '特' ? 'teview': item.CARETYPE == 'Ⅰ' ? 'oneview': item.CARETYPE == 'Ⅱ' ? 'twoview' : 'threeview']">
					<text :class="['icon' ,'iconfont', item.PSEX=='女'?'icon-icon-nv':'icon-icon-nan']"
						:style="{'color': (item.CARETYPE == 'Ⅲ' || item.CARETYPE == '') && item.PSEX=='女'?'#FC8176': (item.CARETYPE == 'Ⅲ' || item.CARETYPE == '') && item.PSEX=='男'?'#94B0FF':'#fff'}">
					</text>
				</view>
				<view class="tabone">
					<view class="bedcolor">{{item.BEDID}}</view>
					<view class="mrn">{{item.MRN}}</view>
				</view>
				<view class="tabtwo">
					<view class="hosinfo">
						<text :class="item.PSEX == '女' ? 'sex' : 'mansex'">{{item.PSEX}}</text>
						<text class="pname">{{item.PNAME}}</text>
					</view>
					<view class="mrn">主治医师：{{item.DRNAME}}</view>
				</view>
				<view class="tabthree">
					<view class="medcial">
						{{item.SERVICENAME}}
					</view>
					<view
						:class="['rank', item.CARETYPE == '特' ? 'levelrankte': item.CARETYPE == 'Ⅰ' ? 'levelrankone' : item.CARETYPE == 'Ⅱ' ? 'levelranktwo' : item.SERIES == 'Ⅲ' ? 'levelrankthree' : '']">
						{{item.CARETYPE}}
					</view>
				</view>
			</view>
			<view class="line">
			</view>
		</view>

	</view>
</template>

<script>
	import listHead from '../../components/html/listHead.vue'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		components: {
			listHead
		},
		data() {
			return {
				only: false,
				written: '',
				value: '',
				hospitalpersonlist: [],
				countArray: [],
				isInputFocus: true,
			}
		},
		computed: {
			...mapState(['deleteArr', 'adminValue'])
		},
		mounted() {
			this.countArray = uni.getStorageSync('deleteArr')
			this.written = uni.getStorageSync('adminValue')

		},
		methods: {
			...mapMutations("user", ["set_deleteObj",'set_siveShow']),
			nav() {},
			cancel() {
				this.show = false
			},
			onblur() {
				this.isInputFocus = false;
			},
			change() {

			},
			doSearch() {
				this.btnChang()
			},
			Jump(data) {
				this.set_deleteObj(data)
				this.set_siveShow(true)
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
				// uni.redirectTo({
				// 	url: '../patient/index'
				// });
			},
			btnChang() {
				if (this.value == '') {
					return
				}
				this.hospitalpersonlist = this.countArray.filter((item, index) => {
					return (item.BEDID).slice(-2) == this.value
				})
				this.value = ''
				if (this.hospitalpersonlist.length > 0) {} else {
					uni.showToast({
						title: '无该床位信息!',
						duration: 2000,
						icon: "error", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
					});
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.top-input {
		display: flex;
		align-items: center;
		padding: 10px;

	}

	.top-bottom {
		width: 15%;
		height: 38px;
		background: #93EFCB;
		border-radius: 0px 6px 6px 0px;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon1 {
			font-size: 18px !important;
			color: #fff;
		}
	}

	.personlist {
		// width: 100%;
		margin: 10rpx 20rpx;
		// height: 160rpx;
		box-shadow: 0px 4rpx 8rpx 0px #E1E1E1;
		border-radius: 12rpx;

		.heardercolor {
			display: inline-block;
			width: 100%;
			height: 10px;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 0px 0px;
		}

		.hearder-view {
			width: 77px;
			height: 62px;
			border-radius: 8px;
			margin: 10px;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 40px !important;
				color: #fff;
			}
		}

		.teview {
			background: #FF9A90;
			box-shadow: 1px 2px 6px 0px rgba(240, 138, 128, 0.5);
		}

		.oneview {
			background: #FF9FD1;
			box-shadow: 1px 2px 6px 0px rgba(255, 89, 248, 0.5);
		}

		.twoview {
			background: #A3D0FF;
			box-shadow: 1px 2px 6px 0px rgba(163, 208, 255, 0.5);
		}

		.threeview {
			background: #FFFFFF;
			box-shadow: 1px 2px 6px 0px rgba(112, 112, 112, 0.5);
		}

		.tecolor {
			background: #FFB9B3 !important;
		}

		.onecolor {
			background: #FFCAE6 !important;
		}

		.twocolor {
			background: #CAE4FF !important;
		}

		.threecolor {
			background: #D6D6D6 !important;
		}

		.personinformation {
			display: flex;

			.tabone {
				margin-top: 24rpx;
				width: 25%;

				.mrn {
					margin-top: 36rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;

				}
			}

			.tabtwo {
				margin-top: 24rpx;
				// margin-left: 44rpx;
				width: 47%;

				.hosinfo {
					display: flex;
					// justify-content: center;
					align-items: center;

					.sex {
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						border-radius: 15rpx;
						background: #FC8176;
						color: #fff;
						font-size: 22rpx;
						text-align: center;
						line-height: 30rpx;
						margin-right: 8rpx;
					}

					.mansex {
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						border-radius: 15rpx;
						background: #94B0FF;
						color: #fff;
						font-size: 22rpx;
						text-align: center;
						line-height: 30rpx;
						margin-right: 8rpx;

					}

					.pname {

						font-size: 30rpx;

						font-weight: 500;
						color: #333333;
						;
					}
				}

				.mrn {
					margin-top: 36rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;

				}
			}

		}

		.tabthree {
			margin-top: 24rpx;
			width: 28%;
			margin-right: 20rpx;

			.medcial {

				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
				text-align: right;
			}

			.rank {
				font-size: 28rpx;
				margin-top: 36rpx;
				font-weight: bold;
				color: #0F5EFF;
				text-align: right;

			}

			.levelrankte {
				color: #FFB9B3 !important;
			}

			.levelrankone {
				color: #FF59F8 !important;
			}

			.levelrankthree {
				color: #D6D6D6 !important;
			}
		}
	}
</style>
